<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
	</head>

	<body> 
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: { 
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}, 
				preloadPages:[{
				    id:'detail',
				    url:'detail.html'           
				 	}
			  	],
					  
			});
			  
			 
			var detailPage = null; 
			//添加列表项的点击事件
			mui('.mui-content').on('tap', 'a', function(e) {
			  var id = this.getAttribute('id');
			  
			  //获得详情页面
			  if(!detailPage){
			    detailPage = plus.webview.getWebviewById('detail');
			  } 
			  
			  //触发详情页面的newsId事件
			  mui.fire(detailPage,'newsId',{
			    id:id
			  });
			    
			//打开详情页面          
			  mui.openWindow({
			    id:'detail', 
			  });
			});
						 
			var onid = '';  // 最新的id
			var upid = ''; 
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					
					mui.ajax('http://029sj.cn/api.php?s=/News/index/',{
						data:{  
							onid:onid,
							upid:upid,
							order:'asc', 
						},
						dataType:'json',//服务器返回json格式数据
						type:'get',//HTTP请求类型
						success:function(data){
							//获得服务器响应
							mui.each(data.msg, function (i, item) {
								var li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.innerHTML = '<a class="mui-navigate-right" href="info.html?id='+item.id+'" id="'+item.id+'"> '+item.title + (item.view) + '</a>';
							 	 
								onid = item.id;   
								table.insertBefore(li, table.firstChild);
						    });  
						}
					});
					 
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0; 
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				 
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					  
					mui.ajax('http://029sj.cn/api.php?s=/News/index/',{
						data:{  
							onid:onid,
							upid:upid,
							order:'desc', 
						},
						dataType:'json',//服务器返回json格式数据
						type:'get',//HTTP请求类型
						success:function(data){
							//获得服务器响应
							mui.each(data.msg, function (i, item) {
								var li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.innerHTML = '<a class="mui-navigate-right"  id="'+item.id+'"> '+item.title  + '</a>';
								if(i==0  && onid=='' ) {
									onid = item.id; 
								}  
								upid = item.id;
								table.appendChild(li); 
						    }); 
						}
					});  
				}, 1500);
			}
			   
			 
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000); 

				});
			} else {
				mui.ready(function() { 
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
		</script>
	</body>

</html>